<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2022-06-28 15:28:04
 * @LastEditors: ZachGmy
 * @LastEditTime: 2022-11-27 20:07:19
-->
<template>
  <div>
    <!-- 新增医院信息 -->
    <el-button type="text" @click="dialogAddFormVisible = true">添加</el-button>

    <el-dialog
      title="添加医院信息"
      :visible.sync="dialogAddFormVisible"
      :show-close="false"
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item
          label="医院名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标记" :label-width="formLabelWidth" prop="flags">
          <el-input v-model="form.flags" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="医院简介"
          :label-width="formLabelWidth"
          prop="introduce"
        >
          <el-input v-model="form.introduce" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="省份"
          :label-width="formLabelWidth"
          prop="province"
        >
          <el-input v-model="form.province" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="市" :label-width="formLabelWidth" prop="city">
          <el-input v-model="form.city" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="区" :label-width="formLabelWidth" prop="area">
          <el-input v-model="form.area" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="详细地址"
          :label-width="formLabelWidth"
          prop="address"
        >
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="经度"
          :label-width="formLabelWidth"
          prop="longitude"
        >
          <el-input v-model="form.longitude" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="纬度"
          :label-width="formLabelWidth"
          prop="latitude"
        >
          <el-input v-model="form.latitude" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="NewDataX()">取 消</el-button>
        <el-button type="primary" @click="AddHos(form)">确 定</el-button>
      </div>
    </el-dialog>
    <br />
    <!-- 显示医院信息 -->
    <el-table :data="HospitalData" border style="width: 100%">
      <el-table-column fixed prop="id" label="id" width="50%">
      </el-table-column>
      <el-table-column fixed prop="name" label="医院名称" width="120%">
      </el-table-column>
      <el-table-column prop="flags" label="标记"> </el-table-column>
      <el-table-column prop="introduce" label="医院简介" width="100%">
      </el-table-column>
      <el-table-column prop="city" label="市" width="90%"> </el-table-column>
      <el-table-column prop="area" label="区" width="90%"> </el-table-column>
      <el-table-column prop="address" label="详细地址" width="90%">
      </el-table-column>
      <el-table-column prop="longitude" label="经度" width="95%">
      </el-table-column>
      <el-table-column prop="latitude" label="纬度" width="90%">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="90%">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            style="color: red"
            @click="ClickB(scope.row)"
            >删除</el-button
          >
          <el-button type="text" size="small" @click="UpData(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹出表单 -->
    <el-dialog
      title="编辑医院信息"
      :visible.sync="dialogEditFormVisible"
      :show-close="false"
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="医院id" :label-width="formLabelWidth" prop="id">
          <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="医院名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标记" :label-width="formLabelWidth" prop="flags">
          <el-input v-model="form.flags" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="医院简介"
          :label-width="formLabelWidth"
          prop="introduce"
        >
          <el-input v-model="form.introduce" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="省份"
          :label-width="formLabelWidth"
          prop="province"
        >
          <el-input v-model="form.province" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="市" :label-width="formLabelWidth" prop="city">
          <el-input v-model="form.city" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="区" :label-width="formLabelWidth" prop="area">
          <el-input v-model="form.area" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="详细地址"
          :label-width="formLabelWidth"
          prop="address"
        >
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="经度"
          :label-width="formLabelWidth"
          prop="longitude"
        >
          <el-input v-model="form.longitude" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="纬度"
          :label-width="formLabelWidth"
          prop="latitude"
        >
          <el-input v-model="form.latitude" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="UpDataX()">取 消</el-button>
        <el-button type="primary" @click="UpHos(form)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get } from '@/utils/request'
import { post } from '@/utils/request'
export default {
  data() {
    return {
      HospitalData: [],
      dialogAddFormVisible: false,
      dialogEditFormVisible: false,
      form: {
        id: '',
        name: '',
        flags: '',
        introduce: '',
        province: '',
        city: '',
        area: '',
        address: '',
        longitude: '',
        latitude: ''
      },
      // 校验规则
      rules: {
        name: [
          { required: true, message: '医院名称为必填项', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '省份为必填项', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '详细地址称为必填项', trigger: 'blur' }
        ],
        city: [{ required: true, message: '市为必填项', trigger: 'blur' }],
        area: [{ required: true, message: '区为必填项', trigger: 'blur' }],
        longitude: [
          { required: true, message: '经度为必填项', trigger: 'blur' }
        ],
        latitude: [{ required: true, message: '纬度为必填项', trigger: 'blur' }]
      },
      formLabelWidth: '120px'
    }
  },
  created() {
    this.getHospitalData()
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    // 查看医院信息
    async getHospitalData() {
      const params = {
        page: 1,
        pageSize: 100,
        name: this.Gname
      }
      const res = await get(
        'http://39.108.154.175:8001/hospital/pageQuery?',
        params
      )
      // this.HospitalData = res.
      console.log(res.data.list)
      this.HospitalData = res.data.list
      this.position =
        res.data.list.city + res.data.list.area + res.data.list.address
    },
    // 删除定点医院信息
    async DelectClick(row) {
      const params = {
        id: row.id
      }
      await get('http://39.108.154.175:8001/hospital/deleteById', params)
    },
    // 点击删除事件弹窗
    ClickB(row) {
      this.$confirm('确认永久删除该医院的信息吗？', '提示')
        .then(async () => {
          this.DelectClick(row)
          this.$message({
            type: 'success',
            message: '删除成功,请刷新页面'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '操作取消'
          })
        })
      this.getHospitalData()
    },
    // 新增医院信息
    NOpen() {
      this.$message('添加成功')
    },
    async AddHos(form) {
      console.log(form)

      const params = {
        // 名称
        name: form.name,
        // 标志
        flags: form.flags,
        // 简介
        introduce: form.introduce,
        // 省份
        province: form.province,
        // 城市
        city: form.city,
        // 区
        area: form.area,
        // 地址
        address: form.address,
        // 经度
        longitude: form.longitude,
        // 纬度
        latitude: form.latitude
      }
      const res = await post(
        'http://39.108.154.175:8001/hospital/saveOrUpdate',
        params
      )
      this.getHospitalData()
      this.NOpen()
      this.dialogAddFormVisible = false
      this.clearForm()
    },
    // 获取row数据到表单
    UpData(row) {
      // id
      this.form.id = row.id
      // 名称
      this.form.name = row.name
      // 标志
      this.form.flags = row.flags
      // 简介
      this.form.introduce = row.introduce
      // 省份
      this.form.province = row.province
      // 城市
      this.form.city = row.city
      // 区
      this.form.area = row.area
      // 地址
      this.form.address = row.address
      // 经度
      this.form.longitude = row.longitude
      // 纬度
      this.form.latitude = row.latitude
      console.log(123456789)
      this.dialogEditFormVisible = true
      console.log(row)
    },
    // 更新医院数据
    UOpen() {
      this.$message('编辑成功')
    },
    async UpHos(form) {
      const params = {
        // id
        id: form.id,
        // 名称
        name: form.name,
        // 标志
        flags: form.flags,
        // 简介
        introduce: form.introduce,
        // 省份
        province: form.province,
        // 城市
        city: form.city,
        // 区
        area: form.area,
        // 地址
        address: form.address,
        // 经度
        longitude: form.longitude,
        // 纬度
        latitude: form.latitude
      }
      const res = await post(
        'http://39.108.154.175:8001/hospital/saveOrUpdate',
        params
      )
      this.getHospitalData()
      this.UOpen()
      this.dialogEditFormVisible = false
      this.clearForm()
    },
    // 清空form表单
    clearForm() {
      this.form.id = ''
      this.form.name = ''
      this.form.flags = ''
      this.form.introduce = ''
      this.form.province = ''
      this.form.city = ''
      this.form.area = ''
      this.form.address = ''
      this.form.longitude = ''
      this.form.latitude = ''
    },
    // 更新数据取消操作
    UpDataX() {
      this.dialogEditFormVisible = false
      this.clearForm()
    },
    NewDataX() {
      this.dialogAddFormVisible = false
      this.clearForm()
    }
  }
}
</script>

<style scoped></style>
